<template>
  <div class="bg">
    <nav-com
      title="我的订单"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <van-tabs
      color="#FF6F4E"
      @click="childActive(active)"
      title-active-color="#FF6F4E"
      v-model="active"
      sticky
    >
      <van-pull-refresh
        v-model='isLoading'
        @refresh='onRefresh'
      >
        <van-tab
          v-for="(item,index) in tabList"
          :key="index"
          :title="item.title"
        >
          <div
            v-if='list.length == 0'
            class="empty"
          >
            <img src='../../assets/t4.png'>
            <p>您还没有订单记录哦~</p>
          </div>
          <div
            v-else
            v-for="(item,index) in list"
            :key="index"
            class="orders_list"
          >
            <div
              class="order_box_title"
              style="display: flex; justify-content: space-between;      padding-top:5px;  margin-right: 10px;align-items: center;"
            >
              <div style=" max-width: 180px; white-space: nowrap; text-overflow: ellipsis;overflow: hidden;">订单编号:{{item.order_sn}}</div>
               
              <!-- <div style="color:#FE4B20;font-size:14px" >{{item.status_name}}</div> -->

              <div style="color:#FE4B20;font-size:14px" v-if="item.status_name!='待付款'">{{item.status_name}}</div>
              <div style="" class="dfk" v-else>
                <van-count-down :time="item.countdown*1000" style="color: #fe332c"  />
              </div>
            </div>
            <div
              v-for="(good,goodIndex) in item.item"
              :key="goodIndex"
              class="order_box"
              @click="toOrderDetail(item.id)"
            >
              <img :src="good.goods_image">
              <div>
                <p>{{good.goods_title}}</p>
                <p style="font-size:12px;">数量：{{good.goods_num}}</p>
                <span>￥{{good.pay_price}}</span>
              </div>
            </div>
            <div class="order_bottom">下单时间：{{item.createtime | formatDateTime}}</div>
            <!-- <div
              v-if="item.item[0].status_code == 'noget' "
              @click='confirmHanlder(item.id)'
              class="order_ab"
            >确认收货</div> -->
            <div style="display: flex;justify-content: flex-end;font-size:14px; padding-bottom: 10px;color: #4D4D4D;">
              <!-- <div
                v-if="item.item[0].status_code.indexOf('after_ing')!=-1"
                @click="returnOrderDetail(index)"
                style="padding: 0 15px;line-height: 36px;background: #EEEEEE;border-radius: 35px;margin-right: 10px;"
              >查看售后详情</div> -->
              <div
              v-if="item.status_code=='finish'"
               @click="toOrderDetail(item.id)"
                style="padding: 0 15px;line-height: 36px;background: #EEEEEE;border-radius: 35px;margin-right: 10px;"
              >查看订单详情</div>
              <div
                v-if="item.item[0].status_code == 'nopay'"
                @click="cancelOrder(item)"
                style="padding: 0 20px;line-height: 36px;background: #EEEEEE;border-radius: 35px;margin-right: 10px;"
              >取消订单</div>
              <div
                v-if="(item.item[0].status_code == 'nosend' || item.item[0].status_code == 'noget') && item.one_day==0"
                @click="applyHandle(item)"
                style="padding: 0 20px;line-height: 36px;background: #EEEEEE;border-radius: 35px;margin-right: 10px; "
              >
                {{item.day==2?'申请转户':'申请退货'}}</div>
              <div
                v-if="item.item[0].status_code == 'noget' "
                @click='confirmHanlder(item.id)'
                style="padding: 0 20px;line-height: 36px;background: #FE4B20;border-radius: 35px;margin-right: 10px; color:#FFF"
              >确认收货</div>
              <div
                v-else-if="item.item[0].status_code == 'nopay'"
                @click="topay(item)"
                style="padding: 0 20px;line-height: 36px;background: #FE4B20;border-radius: 35px;margin-right: 10px; color:#FFF"
              >
                去支付</div>
              <div
                v-if="item.one_day == 3 && item.item[0].status_code != 'nopay'"
                @click="toShares(item)"
                style="padding: 0 20px;line-height: 36px;background: #FE4B20;border-radius: 35px;margin-right: 10px; color:#FFF"
              >
                查看股票</div>
            </div>
          </div>
        </van-tab>
      </van-pull-refresh>
    </van-tabs>
    <van-popup
      v-model="cancelReason"
      position="bottom"
      :style="{ height: '55%' }"
    >
      <div class="popup">
        <div class="popup-title">取消订单</div>
        <div class="popup-tip">
          <p>温馨提示：</p>
          <p>1、限时特价、预约资格等购买优惠可能一并取消</p>
          <p>2、订单一旦取消，无法恢复</p>
          <p>3、其他规定</p>
        </div>
        <div class="cancel-reason">
          <div class="cancel-title">请选择取消订单的原因（必选）：</div>
          <van-radio-group
            v-model="radio"
            @change='radioChange'
          >
            <van-radio
              :name="item.title"
              checked-color="#FE4B20"
              v-for="item in cancelReasonList"
              :key="item.name"
              class="list"
            >{{item.title}}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div
        class="popup-button"
        @click="cancelSubmit"
      >提交</div>
    </van-popup>
  </div>
</template>
<script>
import {
  getOrders,
  getOrders2,
  putOrders,
  cancelOrderApi,
  putselfWithdrawal,
  orderConfirm,
} from "@/api/api";
import navCom from "@/component/nav";
import { Toast } from "vant";
export default {
  name: "orders",
  components: {
    navCom,
  },
  data() {
    return {
      radio: "",
      cancelReason: false,
      cancelReasonList: [
        { name: 0, title: "不想要了" },
        { name: 1, title: "地址填写错误" },
        { name: 2, title: "商品降价" },
        { name: 3, title: "商品错选/多选" },
      ],
      uid: weixin.getUserId(),
      showView: true,
      active: 0,
      tabList: [
        { id: 0, title: "待支付" },
        { id: 1, title: "待发货" },
        { id: 2, title: "待收货" },
        { id: 3, title: "已完成" },
      ],
      list: [],
      isLoading: false,
    };
  },
  filters: {
    /*
        时间格式自定义 只需把字符串里面的改成自己所需的格式
        */
    formatDateTime: function (date) {
      var date = new Date(date * 1000);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var Hours = date.getHours();
      if (Hours >= 0 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      var Minutes = date.getMinutes();
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      var Seconds = date.getSeconds();
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var currentDate =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        strDate +
        " " +
        Hours +
        ":" +
        Minutes +
        ":" +
        Seconds;
      return currentDate;
    },
  },
  // activated() {
  //   this.active = this.$route.params.typeNum || 0;
  //   this.childActive(this.active);
  // },
  mounted() {
    this.active = this.$route.params.typeNum || 0;
    console.log('ordersNo', this.active)
    this.childActive(this.active);
  },
  methods: {
    toShares() {
      this.$router.push({ name: "shares" });
    },
    radioChange(name) {
      console.log(this.radio);
    },
    //返回
    backHandler() {
      if (weixin.isAndroid()) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    },
    // 支付
    topay(item) {
      // this.$router.push({name:'pay',params:{id:item.goods_id, one_day:item.one_day, has_order:true, order_sn:item.order_sn}})

      // var host=window.location.protocol+"//"+window.location.host+'/#/qrCodePay/'+item.order_sn;
      // console.log(host)
      // window.JS_TROOPS.download(host)
      // console.log(item)
      // this.$router.push({
      //           name: "qrCodePay",
      //           params: { order_sn: item.order_sn },
      //         });
      if (item.is_df == 1) {
        this.$router.push({
          name: "payForMe",
          params: {
            id: item.goods_id,
            order_sn: item.order_sn,
          },
        });
        return;
      } else if (item.is_df == 2) {
        this.$router.push({
          name: "qrCodePay",
          params: {
            order_sn: item.order_sn,
          },
        });
        return
      }
      if (item.one_day == 0 || item.one_day == 2) {
        this.$router.push({
          name: "pay",
          params: {
            id: item.goods_id,
            one_day: 0,
            has_order: true,
            order_sn: item.order_sn,
            fromPath: "orders",
          },
        });
      } else if (item.one_day == 3) {
        this.$router.push({
          name: "one_month_pay",
          params: {
            id: item.goods_id,
            one_day: 1,
            has_order: true,
            order_sn: item.order_sn,
          },
        });
      } else if (item.one_day == 3) {
        this.$router.push({
          name: "pay3",
          params: {
            id: item.goods_id,
            one_day: 3,
            has_order: true,
            order_sn: item.order_sn,
          },
        });
      }
    },
    returnOrder(orederDetail) {
      // var orederDetail = this.list[index];
      this.$router.push({
        name: "returnOrder",
        params: {
          id: orederDetail.id,
          money: orederDetail.total_amount,
          goods_id: orederDetail.item[0].id,
          phone: orederDetail.phone,
        },
      });
    },
    returnOrderDetail(index) {
      var orederDetail = this.list[index];
      var aftersale_id = orederDetail.item[0].ext_arr[0].id;
      this.$router.push({
        name: "returnOrderDetail",
        params: { id: aftersale_id },
      });
    },
    returnShopDetail(index) {
      var orederDetail = this.list[index];
      var goods_id = orederDetail.item[0].goods_id;
      this.$router.push({ name: "odersDetails", params: { id: goods_id } });
    },
    onRefresh() {
      if (this.active == 0) {
        this.getDataHanlder("nopay");
      } else if (this.active == 1) {
        this.getDataHanlder("nosend");
      } else if (this.active == 2) {
        this.getDataHanlder("noget");
      } else if (this.active == 3) {
        this.getDataHanlder("finish");
      }
      this.isLoading = false;
    },
    //初始化
    init() {
      this.getDataHanlder("nopay");
    },
    // 申请处理=转户，退货
    applyHandle(data) {
      if (data.day == 2) {
        this.changeUser(data);
      } else {
        this.returnOrder(data);
      }
    },
    // 申请转户
    changeUser(data) {
      this.$router.push({
        name: "orderChangeUser",
        params: { orderId: data.id },
      });
    },
    //获取数据
    getDataHanlder(status) {
      let data = {
        page: 1,
        per_page: 50,
        type: status,
      };
      // data.goodsTypeList = 'zj4399,zj4799,zj4999,zj2w,zj3w,v15p4199,i18p4899,v16p4399,k9p6499,vk19p5999'
      getOrders2(data).then((res) => {
        console.log("getOrders2", res);
        if (res.data.code == 1) {
          this.list = res.data.data.data;
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    //切换
    childActive(val) {
      this.active = val
      console.log(121212, val)
      // 未发货nosend 已发货noget 待评价 nocomment 售后aftersale
      if (val == 0) {
        this.getDataHanlder("nopay");
      } else if (val == 1) {
        this.getDataHanlder("nosend");
      } else if (val == 2) {
        this.getDataHanlder("noget");
      } else if (val == 3) {
        this.getDataHanlder("finish");
      }
    },
    //已自提
    selfOrderaHandler(id) {
      putselfWithdrawal({ id: id }).then((res) => {
        if (res.data.code == 200) {
          this.getDataHanlder(1);
          this.$dialog.alert({
            message: "恭喜您，收到货物啦~",
          });
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    //确认收货
    confirmHanlder(id) {
      orderConfirm({ order_id: id }).then((res) => {
        if (res.data.code == 1) {
          this.getDataHanlder("finish");
          this.$dialog.alert({
            message: "恭喜您，收到货物啦~",
          });
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    // 取消订单
    cancelOrder(data) {
      this.cancelId = data.id;
      this.$dialog
        .alert({
          title: "取消订单",
          message: "您确认要取消该订单吗？订单取消后 只能再次重新购买。",
          showCancelButton: true,
          confirmButtonText: "取消订单",
          cancelButtonText: "我再想想",
        })
        .then(() => {
          this.cancelReason = true;
        });
    },
    cancelSubmit() {
      let quertData = {
        id: this.cancelId,
        cancel_count: this.radio,
      };
      this.cancelReason = false;
      cancelOrderApi(quertData).then((res) => {
        if (res.data.code == 1) {
          console.log(666666666666);
          this.childActive(this.active);
        }
        Toast(res.data.msg);
      });
    },
    toOrderDetail(id) {
      this.$router.push({ name: "orderDetail", params: { id } });
    },
  },
};
</script>
<style scoped>
p {
  padding: 0;
  margin: 0;
}
.bg {
  background: #f1f3f6;
  min-height: 100vh;
}
.orders_list {
  background: #fff;
  position: relative;
  margin: 4vw;
  border-radius: 10px;
}
.order_box_title {
  height: 9.3vw;
  font-size: 3.2vw;
  padding-left: 2.93vw;
  line-height: 9.3vw;
  color: #999;
  border-bottom: 1px solid #EEEEEE;
}
.order_box {
  display: flex;
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 10px;
}
.order_box img {
  width: 24vw;
  height: 24vw;
  padding-top: 3.3vw;
  padding-left: 2.93vw;
}
.order_box p {
  padding-left: 4vw;
  padding-top: 3.3vw;
  color: #333;
}
.order_box span {
  padding-left: 4vw;
  padding-top: 3vw;
  display: block;
  color: #ff0000;
  font-size: 18px;
}
.order_bottom {
  padding: 2vw 2.93vw;
  color: #808080;
  font-size: 13px;
}
.order_ab {
  position: absolute;
  right: 4vw;
  bottom: 17vw;
  width: 22.66vw;
  height: 7vw;
  line-height: 7vw;
  text-align: center;
  border-radius: 1.3vw;
  font-size: 3.2vw;
  background: #fe4b20;
  color: #fff;
}
.empty {
  margin-top: 29.33vw;
  text-align: center;
}
.empty img {
  width: 54.4vw;
  height: 37.6vw;
}
.empty p {
  font-size: 3vw;
  color: #333;
  margin-top: 4vw;
}
.popup {
  margin: 5vw 6vw;
}
.popup-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 2vw 0;
}
.popup-tip {
  background: #f9f9f9;
  padding: 3vw;
  line-height: 7vw;
  color: #737373;
}
.cancel-reason {
  line-height: 15vw;
}
.cancel-reason .cancel-title {
  font-size: 18px;
}
.cancel-reason .list {
  margin: 2vw 0;
  color: #737373 !important;
}
.van-radio__label {
  color: #737373 !important;
}
.popup-button {
  height: 5vh;
  background: #fe4b20;
  color: #fff;
  font-size: 20px;
  width: 80vw;
  margin: 0vh auto;
  line-height: 5vh;
  text-align: center;
  border-radius: 2.5vh;
}
.van-tabs__nav--line {
  width: 100vw;
}
.back_box {
  background: #fff !important;
}
.dfk{
  display: flex;
  background-image: url('../../assets/ddfk.png');
  background-repeat: no-repeat;
  background-size: 135px 20px;
  min-width: 135px;
  background-position: center center;
  justify-content: flex-end;
  font-size: 10px;
  padding-right: 10px;
  color: #FE4B20;
}
</style>
<style>
</style>